<template>
    <div>
        <!--  v-for="item in promptStreamList" :key="item.taskId" -->
        <div class="prompt-main" v-for="item in promptStreamList" :key="item.taskId">
            <div class="prompt-title">定损提示</div>
            <div class="prompt-content">
                你确定接受 报案号: RDZA333333333333333333， 车牌: 京AAA030 姓名:东风卓联(湖北)汽车销售有限公司白沙洲纳华分公司,定损任务吗?
            </div>
            <div class="prompt-btn">
                <el-button type="warning" size="small" @click="answer()">接听</el-button>
                <el-button type="danger" size="small" @click="refuse()">拒绝</el-button>
            </div>
            <!-- <audio ref="audioPlayer" style="display:none" src="@/media/laidian.mp3" id="promptAudio" loop="loop"
                controls autoplay="autoplay">
                <source :src="musicUrl" type="audio/mpeg">
            </audio> -->
            <!-- <audio ref="audioPlayer" class="audio" src="@/media/laidian.mp3" controls autoplay="autoplay"
                :hidden="true"></audio> -->
        </div>
    </div>
</template>
<script>


export default {
    data() {
        return {
            musicUrl: '../../../media/laidian.mp3',
            promptStreamList: []
        }
    },
    props: {
        // eslint-disable-next-line vue/require-default-prop
        promptDetails: Array,
        // eslint-disable-next-line vue/require-default-prop
        closePromptDetails: Object,
    },
    created() {
        // setTimeout(() => {
        console.log(this.promptDetails)
        // this.audioPlay()
        // }, 2000)
    },
    computed: {
    },
    methods: {
        answer() {
            this.audioPause();
        },
        refuse() {
            const audio = this.$refs.audioPlayer
            audio.pause()
            audio.currentTime = 0;
        },
        accept() {
        },
        audioPlay() {
        },
        audioPause() {
            const audio = this.$refs.audioPlayer
            audio.play()
            audio.currentTime = 0;
        }
    },
    watch: {
        promptDetails: {
            handler(stream) {
                console.log("监听定损", stream, this.promptStreamList);
                // let taskid = [];
                // if (this.promptStreamList.length > 0) {
                //     taskid = this.promptStreamList.map((e) => e.taskId);
                //     // 在桌面有提示
                //     // NotifyUtils.Notify();
                // }
                // if (stream.length > 0) {
                //     // this.promptStreamList = stream
                //     stream.forEach((ele) => {
                //         if (!taskid.includes(ele.taskId)) {
                //             // force 是否拒绝3次，3次倒计时10s自动接听
                //             if (ele.force) {
                //                 this.promptStreamList.push({
                //                     ...ele,
                //                     countDown: 10,
                //                 });
                //             } else {
                //                 this.promptStreamList.push({
                //                     ...ele,
                //                     countDown: 30,
                //                 });
                //             }
                //         }
                //     });
                //     // this.$emit("changePromptNum", this.promptStreamList.length);
                //     // this.addStoreCase(stream);
                // } else {
                //     // this.promptStreamList = [];
                //     // this.$emit("changePromptNum", this.promptStreamList.length);
                // }
            },
            deep: true
        }
    }
}
</script>
<style lang='scss' scoped>
.prompt-main {
    width: 280px;
    position: fixed;
    right: 20px;
    bottom: 10px;
    z-index: 10001;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

    .prompt-title {
        padding: 8px 14px;
        margin: 0;
        font-size: 14px;
        background-color: #ee4722;
        border-bottom: 1px solid #ebebeb;
        border-radius: 5px 5px 0 0;
        color: white;
    }

    .prompt-content {
        padding: 10px 13px 10px 18px;
        font-size: 14px;
        line-height: 23px;
        border-bottom: 1px solid #ccc;
    }

    .prompt-btn {
        display: flex;
        justify-content: space-around;
        padding: 5px 0;
    }
}
</style>
